*{
    font-family: 微软雅黑;
}
.main{
    width:500px;
    height: 500px;
    margin:100px auto;
    position: relative;
    padding:0;
}
input{
    display: none;
}
label{/*上下按钮*/
    width: 63px;
    height: 63px;
    background-color: lime;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.3s linear;
    position: absolute;
    left:43%;
    z-index: 10;
    display: none;
}
label:hover{
    opacity: 1;
}
/*当选中某一个label时，上面显示前一个label，下面显示后一个label*/
input:nth-of-type(1):checked ~ label:nth-of-type(2),
input:nth-of-type(2):checked ~ label:nth-of-type(3),
input:nth-of-type(3):checked ~ label:nth-of-type(4),
input:nth-of-type(4):checked ~ label:nth-of-type(5),
input:nth-of-type(5):checked ~ label:nth-of-type(6){
    display: block;
    top:270px;
    background: url("../img/icon/icon_down.png") -5px -2px;
    background-size: 120%;
}
input:nth-of-type(2):checked ~ label:nth-of-type(1),
input:nth-of-type(3):checked ~ label:nth-of-type(2),
input:nth-of-type(4):checked ~ label:nth-of-type(3),
input:nth-of-type(5):checked ~ label:nth-of-type(4),
input:nth-of-type(6):checked ~ label:nth-of-type(5){
    display: block;
    top:20px;
    background: url("../img/icon/icon_up.png") -5px -2px;
    background-size: 120%;
}
.border{
    border:5px solid #333;
    width: 500px;
    height:350px;
    position: absolute;
    top: -5px;
    left: -5px;
}
ul{
    list-style: none;
    padding:0;
    position: relative;
    transition: top ease-in 1s;
}
.main li{
    opacity: 0.01;
    text-align: center;
    position: relative;
    transition: opacity 1s ease;
}
li div:not(.img){/*文字*/
    position: absolute;
    left: -20%;
    font-size: 2em;
    color: orange;
    margin-top: 10px;
    transition: left 2s ease;
}
/*由于图片大小不一，所以采用背景图显示的方法*/
li:nth-of-type(1) .img{
    background: url("../img/animals/bird.jpg");
}
li:nth-of-type(2) .img{
    background: url("../img/animals/cattle.jpg");
}
li:nth-of-type(3) .img{
    background: url("../img/animals/chicken.jpg");
}
li:nth-of-type(4) .img{
    background: url("../img/animals/dog.jpg");
}
li:nth-of-type(5) .img{
    background: url("../img/animals/pig.jpg");
}
li:nth-of-type(6) .img{
    background: url("../img/animals/rabbit.jpg");
}
.main li div.img{
    width: 500px;
    height: 350px;
    background-size: cover;
}

/*图片移动*/
input:nth-of-type(1):checked ~ ul{
    top:0;
}
input:nth-of-type(2):checked ~ ul{
    top:-70%;
}
input:nth-of-type(3):checked ~ ul{
    top:-140%;
}
input:nth-of-type(4):checked ~ ul{
    top:-210%;
}
input:nth-of-type(5):checked ~ ul{
    top:-280%;
}
input:nth-of-type(6):checked ~ ul{
    top:-350%;
}

input:nth-of-type(1):checked ~ ul li:nth-of-type(1),
input:nth-of-type(2):checked ~ ul li:nth-of-type(2),
input:nth-of-type(3):checked ~ ul li:nth-of-type(3),
input:nth-of-type(4):checked ~ ul li:nth-of-type(4),
input:nth-of-type(5):checked ~ ul li:nth-of-type(5),
input:nth-of-type(6):checked ~ ul li:nth-of-type(6){/*图片显示*/
    opacity: 1;
}
input:nth-of-type(1):checked ~ ul li:nth-of-type(1) div:not(.img),
input:nth-of-type(2):checked ~ ul li:nth-of-type(2) div:not(.img),
input:nth-of-type(3):checked ~ ul li:nth-of-type(3) div:not(.img),
input:nth-of-type(4):checked ~ ul li:nth-of-type(4) div:not(.img),
input:nth-of-type(5):checked ~ ul li:nth-of-type(5) div:not(.img),
input:nth-of-type(6):checked ~ ul li:nth-of-type(6) div:not(.img){/*文字飞入*/
    left:10%;
}



